<!DOCTYPE html>
<html>
<head>
    <title>设置个人资料</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myInfo.css"/>


</head>

<body>

<form action="/images/" method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="file" style="display: none" id="uploadInput" name="image"/>
</form>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:window.history.go(-1);">
                <span>取消</span>
            </a>
        </div>
        <div class="col">
            <span>设置个人资料</span>
        </div>
        <div class="col">
            <a href="#" id="saveBtn">
                <span>保存</span>
            </a>
        </div>
    </div>
</div>

<div class="container info">
    <div class="myBg">
        <img id="headImg" class="rounded-circle" render-src="headImgUrl"/>
        <div class="editHead" id="headBtn"><i class="fa fa-pencil-square fa-lg " aria-hidden="true"></i></div>
        <button class="btn btn-outline-light ibtn " id="coverBtn">设置背景</button>
    </div>

    <form id="infoForm" method="post" action="/users">
        <input type="hidden" name="id" render-value="id"/>
        <input type="hidden" name="_method" value="put"/>
        <input type="hidden" name="headImgUrl" render-value="headImgUrl" id="headInput"/>
        <input type="hidden" name="coverImgUrl" render-value="coverImgUrl" id="coverInput"/>
        <label>昵称</label><input type="text" name="nickName" class="form-control" render-value="nickName"><br>
        <label>性别</label><select class="form-control" name="gender" render-value="gender">
        <option value="-1">保密</option>
        <option value="1">男</option>
        <option value="0">女</option>
    </select><br>
        <label>地区</label><input type="text" name="place" class="form-control" render-value="place"><br>
        <label>签名</label><textarea name="sign" class="form-control" rows="5" render-value="sign"></textarea>
    </form>
</div>

<script>
    var userStr = sessionStorage.getItem("user");
    var user;
    if (userStr) {
        user = JSON.parse(userStr);
        $(".info").renderValues(user);
        $(".myBg").css("background", "url('" + user.coverImgUrl + "')")
    }

    var flag;
    $("#headBtn").click(function () {
        $("#uploadInput").click();
        flag = 1;
    });
    $("#coverBtn").click(function () {
        $("#uploadInput").click();
        flag = 2;
    });

    $("#uploadInput").change(function () {
        var value = this.value;
        if (value) {
            $("#uploadForm").ajaxSubmit(function (data) {
                if (data.status == 1) {
                    if (flag == 1) {
                        $("#headImg").attr("src", data.url);
                        $("#headInput").val(data.url)

                    } else {
                        $(".myBg").css("background", "url('" + data.url + "')")
                        $("#coverInput").val(data.url)
                    }
                }
            })
        }
    });
$("#saveBtn").click(function () {
    $("#infoForm").ajaxSubmit(function (data) {
        if(data.success){
            sessionStorage.setItem("user",JSON.stringify(data.data));
            location.href="/mine/profiles.html";
        }
    });
});

</script>

</body>
</html>
